<template>
  <div class="rotate">
    <div class="threeBox" ref="threeBox"></div>
  </div>
</template>

<script>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
export default {
  name: "Rotate",
  data() {
    return {
      scene: null,
      camera: null,
      renderer: null,
      timer: null,
      controls: null,
      clock: null,
      delta: null,
    };
  },
  methods: {
    initCamera(ele) {
      this.camera = new THREE.PerspectiveCamera(
        45,
        ele.clientWidth / ele.clientHeight,
        0.1,
        1000
      );
      this.camera.position.set(0, 0, 100);
      // this.camera.up.set(0, 0, 10)
      this.camera.lookAt(0, 0, 0);
    },
    initScene() {
      this.scene = new THREE.Scene();
    },
    initRender(ele) {
      this.renderer = new THREE.WebGLRenderer();
      this.renderer.setSize(ele.offsetWidth, ele.offsetHeight);
      // 将当前的dom添加到物体中
      ele.appendChild(this.renderer.domElement);
    },
    initControl(ele) {
      const control = new OrbitControls(this.camera, ele);
      control.minDistance = 1;
      control.maxDistance = 100;
      control.enablePan = true
    },
    initContent() {
      this.initSphere("Sun", 10, 30, 30, require("@/assets/sun.jpg"), 0, 0);
      this.initSphere(
        "Earth",
        4,
        30,
        30,
        require("@/assets/earth.jpg"),
        40,
        40
      );
      this.initSphere("Moon", 2, 30, 30, require("@/assets/moon.jpg"), 50, 20);
    },
    render() {
      this.rotation();
      this.renderer.render(this.scene, this.camera);
      requestAnimationFrame(this.render);
      this.delta = this.clock.getDelta();
    },
    // 初始化球体
    initSphere(n, r, W, H, image, positionX = 0, cita = 0) {
      const geometry = new THREE.SphereGeometry(r, W, H);
      const texture = new THREE.TextureLoader().load(image);
      const material = new THREE.MeshBasicMaterial({
        map: texture,
        side: THREE.DoubleSide,
      });
      const sphere = new THREE.Mesh(geometry, material);
      sphere.position.x = positionX;
      sphere.name = n;
      sphere.cita = cita;
      sphere.R = r;
      this.scene.add(sphere);
      // this.object.push(sphere);
    },

    // 公转自转
    rotation() {
      const stars = this.scene.children;
      // 自转
      stars.forEach((star) => {
        star.rotation.y += this.delta * 0.3;
      });
      // 公转
      // 地球绕太阳转
      let earth = stars[1];
      earth.cita += (this.delta * 2 * Math.PI * 0.6) / earth.R;
      earth.position.set(
        earth.R * Math.cos(earth.cita) * 10,
        0,
        earth.R * Math.sin(earth.cita) * 5
      );
      // 月球绕地球转
      let moon = stars[2];
      moon.cita += (this.delta * 2 * Math.PI) / moon.R;
      moon.position.set(
        moon.R * Math.cos(moon.cita) * 5 + earth.R * Math.cos(earth.cita) * 10,
        0,
        moon.R * Math.sin(moon.cita) * 3 + earth.R * Math.sin(earth.cita) * 5
      );
    },
  },
  mounted() {
    let ele = this.$refs.threeBox;
    this.clock = new THREE.Clock();
    this.initScene();
    this.initCamera(ele);
    this.initControl(ele);
    this.initContent();
    this.initRender(ele);
    this.render();
    this.rotation();
  },
};
</script>
<style lang="less" scoped>
.rotate, .threeBox{
    width: 100%;
    height: 100%;
}
</style>
